<template>
<!--  <div v-if="active==0">-->
<!--    首页-->
<!--  </div>-->
<!--  <div v-if="active==1">-->
<!--    视频-->
<!--  </div>-->
<!--  <div v-if="active==2">-->
<!--    消息-->
<!--  </div>-->
  <router-view></router-view>
  <div>
    <van-tabbar v-model="active" @change="onChange" >
      <van-tabbar-item icon="wap-home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="video-o">视频</van-tabbar-item>
      <van-tabbar-item icon="comment-o" @change="toxiao">消息</van-tabbar-item>
      <van-tabbar-item icon="manager-o" @change="todeng" v-if="islogin">我的</van-tabbar-item>
      <van-tabbar-item icon="manager-o" @change="todeng" v-if="!islogin">未登录</van-tabbar-item>
    </van-tabbar>
  </div>


</template>
<script setup>


import {onMounted, ref} from 'vue';

// import {showConfirmDialog} from 'vant';
// import {showSuccessToast} from "vant";
// import http from '../http'
import router from "@/router";
import axios from "axios";
import {useRoute} from "vue-router";
import http from "@/http";

const active = ref(0);
const islogin = ref(false)
const user = ref({}) //用户信息
const videoList = ref([])
const dynamicList = ref([])
const zuijin = ref(0)
const wenzhang = ref([])

const onChange = (index) => {
  active.value = index;
  // 根据不同的 index 值，跳转到对应的路由
  if (index === 0) {
    router.push({path: '/homeindex'});
  } else if (index === 1) {
    router.push({path: '/video'});
  } else if (index === 2) {
    router.push({path: '/message'});
  } else if (index === 3) {
    router.push({path: '/myview'});
  }
};
//
// const dateFormat = (time) => {
//   var date = new Date(time);
//   var year = date.getFullYear();
//   /* 在日期格式中，月份是从0开始的，因此要加0
//    * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
//    * */
//   var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
//   var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
//   var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
//   var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
//   var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
//   // 拼接
//   return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
// }

//
// const totan = () => {
//   showLeft.value = true
// }

const todeng = () => {
  active.value = 3
}
const toxiao = () => {
  active.value = 2
}
const find = () => {
  let id = localStorage.getItem('userid')
  http.get('user/finduserrecent?userid=' + id).then(res => {
    zuijin.value = res.data.data
  })
}
// 所有文章接口
const findwenzhang = () => {
  let id = localStorage.getItem('userid')
  http.get('user/findAllessay?userid=' + id).then(res => {
    wenzhang.value = res.data.data

  })
}

const finduserAllvideo = () => {
  axios.get(`http://localhost:8000/user/findAllvideo/?userid=${user.value.id}`).then(res => {
    videoList.value = res.data.data
  })
}

// const goToVideoDetail = (video) => {
//   // 这里可以实现跳转到视频详情页面的逻辑
//   console.log('跳转到视频详情页面，视频信息：', video);
// };
// 查询所有动态
const finduserAlldynamic = () => {
  axios.get(`http://localhost:8000/user/findAlldynamic/?userid=${user.value.id}`).then(res => {
    dynamicList.value = res.data.data
  })
}


const finduser = (id) => {
  axios.get(`user/userID/?userid=${id}`).then(res => {
    user.value = res.data.data
    find()
    finduserAllvideo()
    finduserAlldynamic()
    findwenzhang()
  })
}

const route = useRoute();
const token = ref('');
const ID = ref('')
const retoken = ref('')
onMounted(() => {
onChange(0)
  const tokenFromURL = route.query.token
  const IDFromuRl = route.query.userid
  const retokenFromURL = route.query.reToken
  if (tokenFromURL) {
    ID.value = IDFromuRl
    token.value = tokenFromURL;
    retoken.value = retokenFromURL
    localStorage.setItem('token', token.value);
    localStorage.setItem('userid', ID.value);
    localStorage.setItem('retoken', retoken.value);
  }
  if (localStorage.getItem("token") != null) {
    islogin.value = true
    finduser(localStorage.getItem("userid"))
  } else {
    islogin.value = false

  }
})


</script>
<style scoped>
.background-container {
  height: 350px; /* 使容器高度占满整个视口高度 */
  /* 替换为你的背景图URL */
  background-size: cover; /* 背景图覆盖整个容器 */
  background-position: center; /* 背景图居中 */
  display: flex;
  justify-content: center; /* 水平居中（如果需要的话） */
  align-items: center; /* 垂直居中（如果需要的话） */
  /* 其他样式，如背景色（虽然在这个例子中不需要，因为我们有背景图） */
}

.container {
  display: flex;
  text-align: center;
  /* 以下是一些可选的 Flex 属性，可以根据需要调整 */
  align-items: center; /* 垂直居中 */
}

.video-item {
  display: flex;
  border-radius: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.video-info {
  flex: 1;
}

.video-thumbnail {
  position: relative;
  margin-left: 10px;
}

.video-duration {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 2px 5px;
}

img {
  max-width: 100%;
  height: auto;
}
</style>